<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Universal - All In 1 Template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
    <!-- Google fonts - Roboto-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700">
    <!-- Bootstrap Select-->
    <link rel="stylesheet" href="vendor/bootstrap-select/css/bootstrap-select.min.css">
    <!-- owl carousel-->
    <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.css">
    <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="css/custom.css">
    <!-- Favicon and apple touch icons-->
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" href="img/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="57x57" href="img/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="img/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="img/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="img/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="img/apple-touch-icon-152x152.png">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  </head>
  <body>
    <div id="all">
      <!-- Top bar-->
      <div class="top-bar">
        <div class="container">
          <div class="row d-flex align-items-center">
            <div class="col-md-6 d-md-block d-none">
              <p>Tel：40088888888 ； E-mail：568626924@qq.com</p>
            </div>
            <div class="col-md-6">
              <div class="d-flex justify-content-md-end justify-content-between">
                <ul class="list-inline contact-info d-block d-md-none">
                  <li class="list-inline-item"><a href="#"><i class="fa fa-phone"></i></a></li>
                  <li class="list-inline-item"><a href="#"><i class="fa fa-envelope"></i></a></li>
                </ul>
                <div class="login"><a href="#" data-toggle="modal" data-target="#login-modal" class="login-btn"><i class="fa fa-sign-in"></i><span class="d-none d-md-inline-block">登陆</span></a><a href="customer-register.html" class="signup-btn"><i class="fa fa-user"></i><span class="d-none d-md-inline-block">注册</span></a></div>
                <!-- <ul class="social-custom list-inline">
                  <li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li>
                  <li class="list-inline-item"><a href="#"><i class="fa fa-google-plus"></i></a></li>
                  <li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li>
                  <li class="list-inline-item"><a href="#"><i class="fa fa-envelope"></i></a></li>
                </ul> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Top bar end-->
      <!-- Login Modal-->
      <div id="login-modal" tabindex="-1" role="dialog" aria-labelledby="login-modalLabel" aria-hidden="true" class="modal fade">
        <div role="document" class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 id="login-modalLabel" class="modal-title">用户 登录</h4>
              <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body">
              <form action="customer-orders.html" method="get">
                <div class="form-group">
                  <input id="email_modal" type="text" placeholder="email" class="form-control">
                </div>
                <div class="form-group">
                  <input id="password_modal" type="password" placeholder="password" class="form-control">
                </div>
                <p class="text-center">
                  <button class="btn btn-template-outlined"><i class="fa fa-sign-in"></i> 登录</button>
                </p>
              </form>
              <p class="text-center text-muted">Not registered yet?</p>
              <p class="text-center text-muted"><a href="customer-register.html"><strong>Register now</strong></a>! It is easy and done in 1 minute and gives you access to special discounts and much more!</p>
            </div>
          </div>
        </div>
      </div>
      <!-- Login modal end-->
      <!-- Navbar Start-->
      <header class="nav-holder make-sticky">
        <div id="navbar" role="navigation" class="navbar navbar-expand-lg">
          <div class="container"><a href="index.html" class="navbar-brand home"><img src="img/logo.png" alt="Universal logo" class="d-none d-md-inline-block"><img src="img/logo-small.png" alt="Universal logo" class="d-inline-block d-md-none"><span class="sr-only">Universal - go to homepage</span></a>
            <button type="button" data-toggle="collapse" data-target="#navigation" class="navbar-toggler btn-template-outlined"><span class="sr-only">Toggle navigation</span><i class="fa fa-align-justify"></i></button>
            <div id="navigation" class="navbar-collapse collapse">
              <ul class="nav navbar-nav ml-auto">
                <li class="nav-item dropdown active"><a href="index.html"  >首页 <b class="caret"></b></a></li>
                <li class="nav-item"><a href="about.html"  >关于我们 <b class="caret"></b></a></li>   
                <li class="nav-item dropdown"><a href="javascript: void(0)" data-toggle="dropdown" class="dropdown-toggle">服务 <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li class="dropdown-item"><a href="services.html" class="nav-link">设计</a></li>
                    <li class="dropdown-item"><a href="services.html" class="nav-link">视频</a></li>
                    <li class="dropdown-item"><a href="services.html" class="nav-link">文案</a></li>
                    <li class="dropdown-item"><a href="services.html" class="nav-link">策划</a></li>
                  </ul>
                </li>  
               <!--  <li class="nav-item dropdown menu-large"><a href="#" data-toggle="dropdown" data-hover="dropdown" data-delay="200" class="dropdown-toggle">服务 <b class="caret"></b></a>
                  <ul class="dropdown-menu megamenu">
                    <li>
                      <div class="row">
                        <div class="col-md-6 col-lg-3">
                          <h5>设计</h5>
                          <ul class="list-unstyled mb-3">
                            <li class="nav-item"><a href="index.html" class="nav-link">Option 1: Default Page</a></li>
                            <li class="nav-item"><a href="index2.html" class="nav-link">Option 2: Application</a></li>
                            <li class="nav-item"><a href="index3.html" class="nav-link">Option 3: Startup</a></li>
                            <li class="nav-item"><a href="index4.html" class="nav-link">Option 4: Agency</a></li>
                            <li class="nav-item"><a href="index5.html" class="nav-link">Option 5: Portfolio</a></li>
                          </ul>                          
                        </div>
                        <div class="col-md-6 col-lg-3">
                          <h5>视频</h5>
                          <ul class="list-unstyled mb-3">
                            <li class="nav-item"><a href="portfolio-2.html" class="nav-link">2 columns</a></li>
                            <li class="nav-item"><a href="portfolio-no-space-2.html" class="nav-link">2 columns with negative space</a></li>
                            <li class="nav-item"><a href="portfolio-3.html" class="nav-link">3 columns</a></li>
                            <li class="nav-item"><a href="portfolio-no-space-3.html" class="nav-link">3 columns with negative space</a></li>
                            <li class="nav-item"><a href="portfolio-4.html" class="nav-link">4 columns</a></li>
                            <li class="nav-item"><a href="portfolio-no-space-4.html" class="nav-link">4 columns with negative space</a></li>
                            <li class="nav-item"><a href="portfolio-detail.html" class="nav-link">Portfolio - detail</a></li>
                            <li class="nav-item"><a href="portfolio-detail-2.html" class="nav-link">Portfolio - detail 2</a></li>
                          </ul>                          
                        </div>
                        <div class="col-md-6 col-lg-3">
                          <h5>文案</h5>
                          <ul class="list-unstyled mb-3">
                            <li class="nav-item"><a href="shop-category.html" class="nav-link">Category - sidebar right</a></li>
                            <li class="nav-item"><a href="shop-category-left.html" class="nav-link">Category - sidebar left</a></li>
                            <li class="nav-item"><a href="shop-category-full.html" class="nav-link">Category - full width</a></li>
                            <li class="nav-item"><a href="shop-detail.html" class="nav-link">Product detail</a></li>
                          </ul>                          
                        </div>
                        <div class="col-md-6 col-lg-3">
                          <h5>策划</h5>
                          <ul class="list-unstyled mb-3">
                            <li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
                            <li class="nav-item"><a href="contact2.html" class="nav-link">Contact - version 2</a></li>
                            <li class="nav-item"><a href="contact3.html" class="nav-link">Contact - version 3</a></li>
                          </ul>                          
                        </div>
                      </div>
                    </li>
                  </ul>
                </li>   -->  
                <li class="nav-item"><a href="team.html"  >团队 <b class="caret"></b></a></li>    
                <li class="nav-item dropdown menu-large"><a href="#" data-toggle="dropdown" class="dropdown-toggle">案例<b class="caret"></b></a>
                  <ul class="dropdown-menu megamenu">
                    <li>
                      <div class="row">
                        <div class="col-lg-4"><img src="img/template-easy-customize.png" alt="" class="img-fluid d-none d-lg-block"></div>
                        <div class="col-lg-2 col-md-6">
                          <h5>设计</h5>
                          <ul class="list-unstyled mb-3">
                            <li class="nav-item"><a href="case.html" class="nav-link">人物写真</a></li>
                            <li class="nav-item"><a href="case.html" class="nav-link">户外写生</a></li>
                            <li class="nav-item"><a href="case.html" class="nav-link">品牌设计</a></li>
                            <li class="nav-item"><a href="case.html" class="nav-link">产品介绍</a></li>
                            <li class="nav-item"><a href="case.html" class="nav-link">UI设计</a></li>
                            <li class="nav-item"><a href="case.html" class="nav-link">包装设计</a></li>
                            <li class="nav-item"><a href="case.html" class="nav-link">宣传册/画册</a></li>
                            <!-- <li class="nav-item"><a href="template-typography.html" class="nav-link">Typography</a></li> -->
                          </ul>
                        </div>
                        <div class="col-lg-2 col-md-6">
                          <h5>视频</h5>
                          <ul class="list-unstyled mb-3">
                            <li class="nav-item"><a href="case.html" class="nav-link">宣传片</a></li>
                            <li class="nav-item"><a href="case.html" class="nav-link">纪录片</a></li>
                            <li class="nav-item"><a href="case.html" class="nav-link">短视频</a></li>
                            <li class="nav-item"><a href="case.html" class="nav-link">MV</a></li>
                            <li class="nav-item"><a href="case.html" class="nav-link">会议/访谈</a></li>
                          </ul>
                        </div>
                        <div class="col-lg-2 col-md-6">
                          <h5>文案</h5>
                          <ul class="list-unstyled mb-3">
                            <li class="nav-item"><a href="case.html" class="nav-link">剧本脚本</a></li>
                            <li class="nav-item"><a href="case.html" class="nav-link">微信推文</a></li>
                            <li class="nav-item"><a href="case.html" class="nav-link">演讲稿/发言稿</a></li>
                            <li class="nav-item"><a href="case.html" class="nav-link">新闻资讯</a></li>
                            <li class="nav-item"><a href="case.html" class="nav-link">总结/汇报</a></li>
                            <li class="nav-item"><a href="case.html" class="nav-link">PPT排版</a></li>
                          </ul>
                        </div>
                        <div class="col-lg-2 col-md-6">
                          <h5>策划</h5>
                          <ul class="list-unstyled mb-3">
                            <li class="nav-item"><a href="case.html" class="nav-link">品牌策划</a></li>
                            <li class="nav-item"><a href="case.html" class="nav-link">视频编导</a></li>
                            <li class="nav-item"><a href="case.html" class="nav-link">文化建设</a></li>
                            <li class="nav-item"><a href="case.html" class="nav-link">形象设计</a></li>
                            <li class="nav-item"><a href="case.html" class="nav-link">活动策划</a></li>
                          </ul>
                        </div>
                      </div>
                    </li>
                  </ul>
                </li>
                <li class="nav-item"><a href="blog.html"  >新闻 <b class="caret"></b></a></li> 
                <li class="nav-item"><a href="topic.html"  >话题 <b class="caret"></b></a></li> 
                <li class="nav-item"><a href="contact.html"  >联系我们 <b class="caret"></b></a></li>
              </ul>
            </div>
          </div>
        </div>
      </header>
      <!-- Navbar End-->
      
      <div id="heading-breadcrumbs" class="border-top-0 border-bottom-0">
        <div class="container">
          <div class="row d-flex align-items-center flex-wrap">
            <div class="col-md-7">
              <h1 class="h2">Blog Listing: Medium</h1>
            </div>
            <div class="col-md-5">
              <ul class="breadcrumb d-flex justify-content-end">
                <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                <li class="breadcrumb-item active">Blog Listing: Medium</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div id="content">
        <div class="container">
          <div class="row bar">
            <div id="blog-listing-medium" class="col-md-9">
              <section class="post">
                <div class="row">
                  <div class="col-md-4">
                    <div class="image"><a href="blog-post.html"><img src="img/blog-medium.jpg" alt="Example blog post alt" class="img-fluid"></a></div>
                  </div>
                  <div class="col-md-8">
                    <h2 class="h3 mt-0"><a href="post.htmls">Fashion now</a></h2>
                    <div class="d-flex flex-wrap justify-content-between text-xs">
                      <p class="author-category">By <a href="#">John Snow</a> in <a href="blog.html">Webdesign</a></p>
                      <p class="date-comments"><a href="blog-post.html"><i class="fa fa-calendar-o"></i> June 20, 2013</a><a href="blog-post.html"><i class="fa fa-comment-o"></i> 8 Comments</a></p>
                    </div>
                    <p class="intro">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                    <p class="read-more text-right"><a href="blog-post.html" class="btn btn-template-outlined">Continue reading</a></p>
                  </div>
                </div>
              </section>
              <section class="post">
                <div class="row">
                  <div class="col-md-4">
                    <div class="video">
                      <div class="embed-responsive embed-responsive-4by3">
                        <iframe src="//www.youtube.com/embed/upZJpGrppJA" class="embed-responsive-item"></iframe>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-8">
                    <h2 class="h3 mt-0"><a href="post.htmls">Post with video</a></h2>
                    <div class="d-flex flex-wrap justify-content-between text-xs">
                      <p class="author-category">By <a href="#">John Snow</a> in <a href="blog.html">Webdesign</a></p>
                      <p class="date-comments"><a href="blog-post.html"><i class="fa fa-calendar-o"></i> June 20, 2013</a><a href="blog-post.html"><i class="fa fa-comment-o"></i> 8 Comments</a></p>
                    </div>
                    <p class="intro">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                    <p class="read-more text-right"><a href="blog-post.html" class="btn btn-template-outlined">Continue reading</a></p>
                  </div>
                </div>
              </section>
              <section class="post">
                <div class="row">
                  <div class="col-md-4">
                    <div class="image"><a href="blog-post.html"><img src="img/blog-medium.jpg" alt="Example blog post alt" class="img-fluid"></a></div>
                  </div>
                  <div class="col-md-8">
                    <h2 class="h3 mt-0"><a href="post.htmls">Fashion now</a></h2>
                    <div class="d-flex flex-wrap justify-content-between text-xs">
                      <p class="author-category">By <a href="#">John Snow</a> in <a href="blog.html">Webdesign</a></p>
                      <p class="date-comments"><a href="blog-post.html"><i class="fa fa-calendar-o"></i> June 20, 2013</a><a href="blog-post.html"><i class="fa fa-comment-o"></i> 8 Comments</a></p>
                    </div>
                    <p class="intro">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                    <p class="read-more text-right"><a href="blog-post.html" class="btn btn-template-outlined">Continue reading</a></p>
                  </div>
                </div>
              </section>
              <ul class="pager d-flex align-items-center justify-content-between list-unstyled">
                <li class="previous"><a href="#" class="btn btn-template-outlined">← Older</a></li>
                <li class="next disabled"><a href="#" class="btn btn-template-outlined">Newer →</a></li>
              </ul>
            </div>
            <div class="col-md-3">
              <div class="panel panel-default sidebar-menu">
                <div class="panel-heading">
                  <h3 class="h4 panel-title">Text widget</h3>
                </div>
                <div class="panel-body text-widget">
                  <p>Improved own provided blessing may peculiar domestic. Sight house has never. No visited raising gravity outward subject my cottage mr be. Hold do at tore in park feet near my case.</p>
                </div>
              </div>
              <div class="panel panel-default sidebar-menu">
                <div class="panel-heading">
                  <h3 class="h4 panel-title">Search</h3>
                </div>
                <div class="panel-body">
                  <form role="search">
                    <div class="input-group">
                      <input type="text" placeholder="Search" class="form-control"><span class="input-group-btn">
                        <button type="submit" class="btn btn-template-main"><i class="fa fa-search"></i></button></span>
                    </div>
                  </form>
                </div>
              </div>
              <div class="panel panel-default sidebar-menu">
                <div class="panel-heading">
                  <h3 class="h4 panel-title">Categories</h3>
                </div>
                <div class="panel-body">
                  <ul class="nav nav-pills flex-column text-sm">
                    <li class="nav-item"><a href="blog.html" class="nav-link">Webdesign</a></li>
                    <li class="nav-item"><a href="blog.html" class="nav-link active">Tutorials</a></li>
                    <li class="nav-item"><a href="blog.html" class="nav-link">Print</a></li>
                    <li class="nav-item"><a href="blog.html" class="nav-link">Our tips</a></li>
                  </ul>
                </div>
              </div>
              <div class="panel sidebar-menu">
                <div class="panel-heading">
                  <h3 class="h4 panel-title">Tags</h3>
                </div>
                <div class="panel-body">
                  <ul class="tag-cloud list-inline">
                    <li class="list-inline-item"><a href="#"><i class="fa fa-tags"></i> html5</a></li>
                    <li class="list-inline-item"><a href="#"><i class="fa fa-tags"></i> css3</a></li>
                    <li class="list-inline-item"><a href="#"><i class="fa fa-tags"></i> jquery</a></li>
                    <li class="list-inline-item"><a href="#"><i class="fa fa-tags"></i> ajax</a></li>
                    <li class="list-inline-item"><a href="#"><i class="fa fa-tags"></i> php</a></li>
                    <li class="list-inline-item"><a href="#"><i class="fa fa-tags"></i> responsive</a></li>
                    <li class="list-inline-item"><a href="#"><i class="fa fa-tags"></i> visio</a></li>
                    <li class="list-inline-item"><a href="#"><i class="fa fa-tags"></i> bootstrap</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- GET IT-->
      <div class="get-it">
        <div class="container">
          <div class="row">
            <div class="col-lg-8 text-center p-3">
              <h3>Do you want cool website like this one?</h3>
            </div>
            <div class="col-lg-4 text-center p-3">   <a href="#" class="btn btn-template-outlined-white">Buy this template now</a></div>
          </div>
        </div>
      </div>
      <!-- FOOTER -->
      <footer class="main-footer">
        <div class="container">
          <div class="row">
            <div class="col-lg-5">
              <h4 class="h6">关于我们</h4>
              <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
              <hr>
              <h4 class="h6">这个大家庭等待你的加入</h4>
              <hr class="d-block d-lg-none">
            </div>
            <div class="col-lg-5">
              <h4 class="h6">联系方式</h4>
              <p class="text-uppercase">地址：<strong>贵州省贵阳市息烽县</strong><br>Q Q：<strong>568626924</strong><br>邮箱：<strong>568626924@qq.com</strong></p><a href="contact.html" class="btn btn-template-main">马上联系</a>
              <hr class="d-block d-lg-none">
            </div>
            <div class="col-lg-2">
              <h4 class="h6">关注我们</h4>
              <a href="#" style="width:100px;"><img src="img/detailsquare.jpg" alt="..." class="img-fluid"></a>
            </div>
          </div>
        </div>
        <div class="copyrights">
          <div class="container">
            <div class="row">
              <div class="col-lg-4 text-center-md">
                <p>&copy; 2019-2021 ruochen.  </p>
              </div>
              <div class="col-lg-8 text-right text-center-md">
                <p>ICP ： <a href="http://www.miitbeian.gov.cn/" target="_blank" title="黔ICP备2021000396号">黔ICP备2021000396号</a></p>

              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>
    <!-- Javascript files-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/popper.js/umd/popper.min.js"> </script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
    <script src="vendor/waypoints/lib/jquery.waypoints.min.js"> </script>
    <script src="vendor/jquery.counterup/jquery.counterup.min.js"> </script>
    <script src="vendor/owl.carousel/owl.carousel.min.js"></script>
    <script src="vendor/owl.carousel2.thumbs/owl.carousel2.thumbs.min.js"></script>
    <script src="js/jquery.parallax-1.1.3.js"></script>
    <script src="vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script src="vendor/jquery.scrollto/jquery.scrollTo.min.js"></script>
    <script src="js/front.js"></script>
  </body>
</html>